<template>
	<div id="Thread">
		<div class="main">
			<div class="top">
				<div class="bcontent" v-if="forum_thread.thread_imgs != ''">
					<x-header :left-options="{showBack: false}" class="header">
						<a slot="left" @click="back()"><i class="back-icon tribune-back"></i></a>
						<a slot="right" @click="shareBtn"><i class="share-icon tribune-share"></i></a>
					</x-header>
					<div class="imglist">
						<swiper :index="imgindex" @on-index-change="indexChange" :show-desc-mask="false" auto :interval="5000" :show-dots="false" :aspect-ratio="746/790">
							<swiper-item v-for="(item,index) in imgLists" :key="index">
								<a href="javascript:;" @click="getphoto(index)">
									<img :src="item.msrc" class="vux-img" />
								</a>
							</swiper-item>
						</swiper>
						<previewer :list="imgLists" ref="previewer"></previewer>
						<div class="endtime">
							<span class="count">{{imgindex}}/{{imgLists.length}}</span>
						</div>
					</div>
				</div>
				<div v-else>
					<x-header :left-options="{showBack: false}" title="主题帖" class="header vux-1px-b">
						<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
						<a slot="right" @click="shareBtn"><i class="share-icon tribune-share"></i></a>
					</x-header>
				</div>
			</div>
			<!--发布详情-->
			<div class="common-list">
				<div class="title-bar">
					<img v-if="forum_thread.member_id == undefined" src="../assets/images/home/defaultImg.jpg" alt="" class="photo" />
					<img v-else :src="'/los/uploads/thumb/header/' + forum_thread.member_id + '_76X76.jpeg'" alt="" class="photo" />
					<img src="../assets/images/tribune/ic_forum_list_v2.png" alt="" class="logo" />
					<div class="desc">
						<div>
							<h2>{{forum_thread.member_nickname}}</h2>
							<img src="../assets/images/tribune/ic_forum_list_lv9.png" alt="" />
						</div>
						<p> {{common.threadTime(forum_thread.thread_time)}} {{thread_vcount}}次浏览</p>
					</div>
					<span @click="memberFollow(forum_thread.member_id)" class="flow">{{follow_text}}</span>
				</div>
				<div class="goods-detail">
					<p v-html="forum_thread.thread_content"></p>
					<div v-if="forum_thread.thread_link != null">
						<div class="link-style" v-if="forum_thread.thread_link.href != ''">
							<a :href="thread_link.href">
								<div class="link">
									<i class="tribune-icon tribune-link"></i>
									<span>{{thread_link.text}}</span>
								</div>
							</a>
						</div>
					</div>
				</div>
				<div class="visitor">
					<ul>
						<li v-for="item in threadLike">
							<img v-if="item.member_id == undefined" src="../assets/images/home/defaultImg.jpg" alt="" class="photo" />
							<img v-else :src="'/los/uploads/thumb/header/' + item.member_id + '_76X76.jpeg'" alt="" class="photo" />
						</li>
					</ul>
					<div class="assist" v-if="forum_thread.thread_vlike > 0">
						<span>{{forum_thread.thread_vlike}}次赞</span>
						<i v-if="threadLike.length > 7" class="arrow-down tribune-arrow-down"></i>
					</div>
				</div>
			</div>
			<div class="comment">
				<router-link :to="'/tribune/AllComments/thread_id/' + forum_thread.thread_id + '?type=all'">
					<div class="title">
						<h2>全部评论</h2>
						<i class="arrow-down tribune-arrow-right"></i>
						<span>共{{threadList.length}}条评论</span>
					</div>
				</router-link>
				<div class="comment-list">
					<ul>
						<li v-for="(item,index) in threadList">
							<div class="title-bar">
								<img :src="'/los/uploads/thumb/header/' + item.member_id + '_76X76.jpeg'" alt="" class="photo" />
								<img src="../assets/images/tribune/ic_forum_list_v2.png" alt="" class="logo" />
								<div class="desc">
									<div>
										<h2>{{item.member_nickname}}</h2>
									</div>
									<p> {{common.threadTime(item.thread_time)}}</p>
								</div>
								<div class="zan">
									<i @click="levelComment(item.member_nickname,item.thread_id,index)" class="re-icon tribune-comment"></i>
									<span>{{item.thread_vlike}}</span>
									<i @click="replyLike(item.thread_id,index)" :class="{'tribune-praise':!Praise,'tribune-praise-on':Praise}" class="tribune-icon"></i>
								</div>
							</div>
							<div v-html="item.thread_content" class="content"></div>
							<router-link :to="'/tribune/AllComments/thread_id/' + item.thread_id + '?type=single'">
								<div class="reply" v-for="(items,index) in item.children" v-if="index == 0" @click="replyBtn(items.thread_title)">
									<span>{{items.member_nickname}}：</span>{{items.thread_content}}
									<p v-if="item.children.length > 1">共{{item.children.length}}条回复></p>
								</div>
							</router-link>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="bottom-bar">
			<img :src="'/los/uploads/thumb/header/' + member_id + '_76X76.jpeg'" alt="" class="thumb" />
			<div @click="toReply" class="input">总得说点什么</div>
			<ul class="browse-data">
				<li @click="currentLike(forum_thread.thread_id)">
					<i class="tribune-icon tribune-praise"></i>
					<span>{{forum_thread.thread_vlike}}</span>
				</li>
				<li>
					<i @click="threadCollect(forum_thread.thread_id)" class="tribune-icon tribune-collect"></i>
					<span>{{forum_thread.thread_vcollect}}</span>
				</li>
				<li>
					<i class="tribune-icon tribune-comment"></i>
					<span>{{threadList.length}}</span>
				</li>
			</ul>
		</div>
		<div class="reply-wrap" v-show="replyShow">
			<div>
				<img :src="'/los/uploads/thumb/header/' + member_id + '_76X76.jpeg'" alt="" class="thumb" />
				<x-textarea v-if="athost != ''" v-model="thread_content" :placeholder="athost" @on-change="change" :show-counter="false" :rows="1" autosize id="textarea"></x-textarea>
				<x-textarea v-else v-model="thread_content" @on-change="change" :show-counter="false" :rows="1" autosize id="textarea" placeholder="总得说点什么"></x-textarea>
				<span class="send" @click="addReply">发送</span>
			</div>
		</div>
		<popup v-model="shareAlert" is-transparent>
			<div class="share-wrap">
				<ul>
					<li @click="copyLink()" class="tag-read" :data-clipboard-text="ShareLink">
						<img src="../assets/images/tribune/ic_forum_detail_pop_up_copy.png" alt="" />
						<p>链接</p>
					</li>
					<li @click="threadCollect(forum_thread.thread_id)">
						<img src="../assets/images/tribune/ic_forum_detail_pop_up_collect.png" alt="" />
						<p>收藏</p>
					</li>
					<li @click="threadAccuse(forum_thread.thread_id)">
						<img src="../assets/images/tribune/ic_forum_detail_pop_up_report.png" alt="" />
						<p>举报</p>
					</li>
				</ul>
				<button @click="shareAlert = false">取消</button>
			</div>
		</popup>

		<loading :show="show" text="加载中"></loading>
		<toast v-model="success" type="text" width="3rem">{{msg}}</toast>
	</div>
</template>

<script>
	import $ from 'jquery'
	import Clipboard from 'clipboard';
	import { XHeader, Swiper, SwiperItem, Previewer, Popup, XButton, Toast, XTextarea, Loading } from 'vux'
	export default {
		data() {
			return {
				imgindex: 1,
				imgLists: [],
				shareAlert: false,
				replyShow: false,
				forum_thread: {},
				thread_link: {},
				thread_id: '',
				thread_content: '',
				focusState: false,
				success: false,
				replyAlert: false,
				msg: '',
				threadList: [],
				athost: '',
				levelBtn: false,
				Praise: false,
				show: false,
				threadLike: [],
				reply_thread_title: '',
				thread_vcount: '',
				_index: '',
				follow_text: '',
				ShareLink: '',
				member_id: ''
			}
		},
		components: {
			XHeader,
			Swiper,
			SwiperItem,
			Previewer,
			Popup,
			XButton,
			Toast,
			XTextarea,
			Loading
		},

		mounted() {
			this.getThreadDetail();
			this.getThreadList();
			this.getThreadLike();
			this.threadVisit();
			this.getSession();
		},
		beforeRouteLeave(to, from, next) {
			if(to.name == 'HotList') {
				to.meta.keepAlive = true;
			}
			next();
		},
		methods: {
			///api/forum/thread_del.json  post thread_id  删除
			getSession: function() {
				this.member_id = window.sessionStorage.getItem('member_id');
				this.ShareLink = window.location.href;
			},
			//获取帖子详情
			getThreadDetail: function() {
				this.thread_id = this.$route.params.thread_id
				this.$http({
					method: 'GET',
					url: '/los/api/forum/thread_details.json?thread_id=' + this.thread_id
				}).then((result) => {
					this.forum_thread = result.data.data.forum_thread;
					this.imgLists = result.data.data.thread_imgs;
					this.thread_link = this.forum_thread.thread_link;
					if(this.forum_thread.member_follow == 1) {
						this.follow_text = '已关注';
					} else {
						this.follow_text = '+关注';
					}
				}).catch((err) => {

				})
			},

			//点赞列表
			getThreadLike: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/forum/thread_like.json?thread_id=' + this.thread_id
				}).then((result) => {
					if(result.data.code == 1) {
						this.threadLike = result.data.data.thread_like;
					}
				}).catch((err) => {

				})
			},

			//访问记录
			threadVisit: function() {
				var params = {
					thread_id: this.thread_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/forum/thread_visit.json',
					data: params
				}).then((result) => {
					if(result.data.code == 1) {
						this.thread_vcount = result.data.data.thread_vcount;
					}
				}).catch((err) => {})
			},

			//获取评论列表 
			getThreadList: function() {
				this.show = !this.show;
				var parent_id = this.thread_id;
				var _this = this;
				this.$http({
					method: 'GET',
					url: '/los/api/forum/thread_list.json?parent_id=' + parent_id
				}).then((result) => {
					if(result.data.code == 1) {
						this.show = false;
						this.threadList = result.data.data;
					} else {
						this.show = false;
					}
				}).catch((err) => {

				})
			},

			//一级回复评论
			addReply: function() {
				var params = {
					parent_id: this.thread_id,
					thread_content: this.thread_content
				}
				console.log(params);
				if(this.thread_content != '') {
					this.$http({
						method: 'POST',
						url: '/los/api/forum/thread_add.json',
						data: params
					}).then((result) => {
						if(result.data.code == 1) {
							this.success = !this.success;
							this.msg = result.data.msg;
							this.thread_content = '';
							this.replyShow = !this.replyShow;
							if(this.levelBtn != true) {
								this.threadList.unshift(result.data.data.forum_thread);
								console.log(this.threadList);
							} else {
								this.threadList[this._index].children.unshift(result.data.data.forum_thread);
							}
						}

					}).catch((err) => {

					})
				}
			},

			//二级回复评论
			levelComment: function(member_nickname, thread_id, index) {
				this.replyShow = !this.replyShow;
				this.thread_content = '';
				this.thread_id = thread_id;
				this.athost = '回复@' + member_nickname;
				console.log(this.athost);
				this.levelBtn = true;
				this._index = index;
			},

			//点击关注
			memberFollow: function(member_id) {
				var params = {
					member_id: member_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/forum/member_follow.json',
					data: params
				}).then((result) => {
					if(result.data.code == 1) {
						this.success = !this.success;
						this.msg = result.data.msg;
						this.$nextTick(() => {
							this.getThreadDetail();
						})
					}
				}).catch((err) => {

				})
			},

			//帖子列表点赞
			replyLike: function(thread_id, index) {
				console.log(index);
				var params = {
					thread_id: thread_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/forum/thread_like.json',
					data: params
				}).then((result) => {
					if(result.data.code == 1) {
						this.success = !this.success;
						this.msg = result.data.msg;
						if(result.data.data.thread_like.like_state == 1) {
							this.$nextTick(() => {
								this.threadList[index].thread_vlike++;
							})
						} else {
							this.$nextTick(() => {
								this.threadList[index].thread_vlike--;
							})
						}
					}
				}).catch((err) => {

				})
			},

			//当前帖子点赞
			currentLike: function(thread_id) {
				var params = {
					thread_id: thread_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/forum/thread_like.json',
					data: params
				}).then((result) => {
					if(result.data.code == 1) {
						this.success = !this.success;
						this.msg = result.data.msg;
						if(result.data.data.thread_like.like_state == 1) {
							this.$nextTick(() => {
								this.forum_thread.thread_vlike++;
							})
						} else {
							this.$nextTick(() => {
								this.forum_thread.thread_vlike--;
							})
						}
					}
				}).catch((err) => {

				})
			},

			//点击收藏
			threadCollect: function(thread_id) {
				var params = {
					thread_id: thread_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/forum/thread_collect.json',
					data: params
				}).then((result) => {
					this.success = !this.success;
					this.msg = result.data.msg;
					this.shareAlert = false;
					if(result.data.data.thread_collect.collect_state == 1) {
						this.forum_thread.thread_vcollect++;
					} else {
						this.forum_thread.thread_vcollect--;
					}
				}).catch((err) => {

				})
			},
			//点击举报
			threadAccuse: function(thread_id) {
				var params = {
					thread_id: thread_id
				}
				this.$http({
					method: 'POST',
					url: '/los/api/forum/thread_accuse.json',
					data: params
				}).then((result) => {
					this.success = !this.success;
					this.msg = result.data.msg;
					this.shareAlert = false;
				}).catch((err) => {

				})
			},
			//点击复制链接
			copyLink() {
				var _this = this;
				var clipboard = new Clipboard('.tag-read');
				clipboard.on('success', function(e) {
					_this.success = !_this.success;
					_this.msg = '复制成功';
				})
				clipboard.on('error', e => {
					_this.success = !_this.success;
					_this.msg = '该浏览器不支持自动复制';
					clipboard.destroy();
				})
			},
			shareBtn: function() {
				this.shareAlert = true;
				this.replyShow = false;
			},

			//三级回复 点击出现弹窗
			replyBtn: function(thread_title) {
				this.reply_thread_title = thread_title;
				this.replyAlert = !this.replyAlert;
				$('.reply-wrap').hide();
			},

			//点击出现详情图
			getphoto: function(index) {
				this.$refs.previewer.show(index);
			},
			//判断输入框是否有值
			change: function(event) {
				if(event != '') {
					$('.send').css('opacity', '1');
				}
			},
			//小图标轮播图切换
			indexChange(index) {
				this.imgindex = index + 1;
			},
			toReply: function() {
				this.replyShow = !this.replyShow;
			},
			back: function() {
				window.history.go(-1);
			},
		}
	}
</script>

<style scoped>
	#Thread {
		position: relative;
		padding-bottom: 1rem;
	}
	
	.main {
		position: relative;
	}
	
	.bcontent {
		position: relative;
	}
	
	.bcontent .header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
	}
	
	.dec {
		width: 0.85rem;
		height: 0.85rem;
		background-size: 100% 100%;
		background-position: 0 0;
		display: inline-block;
	}
	
	.header {
		background-color: transparent !important;
	}
	
	.main .top {
		background-color: #fff;
	}
	
	.main .body {
		margin: 0.26rem 0;
	}
	
	.main .imglist {
		position: relative;
	}
	
	.main .imglist .endtime {
		position: absolute;
		right: 0.49rem;
		bottom: 0.45rem;
		font-size: 0.34666rem;
		color: #fff;
		overflow: hidden;
	}
	
	.common-list {
		background: #fff;
		padding: 0.4rem 0.26rem 0;
	}
	
	.title-bar {
		overflow: hidden;
		position: relative;
	}
	
	.title-bar .photo {
		float: left;
		width: 1.06rem;
		height: 1.06rem;
		border-radius: 50%;
	}
	
	.title-bar .logo {
		position: absolute;
		width: 0.42rem;
		height: 0.42rem;
		left: 0.66rem;
		top: 0.66rem;
	}
	
	.title-bar .desc {
		float: left;
		margin-left: 0.26rem;
	}
	
	.title-bar .desc>div {
		overflow: hidden;
	}
	
	.title-bar .desc h2 {
		font-size: 0.4rem;
		color: #dd2828;
		float: left;
	}
	
	.title-bar .desc img {
		float: left;
		width: 0.44rem;
		height: 0.44rem;
		margin-left: 0.1rem;
	}
	
	.title-bar .desc p {
		font-size: 0.32rem;
		color: #999;
		line-height: 0.48rem;
		margin-top: 0.1rem;
	}
	
	.title-bar .desc .hot {
		font-size: 0.32rem;
		color: #fff;
		background: #A27979;
		padding: 0.04rem 0.08rem;
		border-radius: 0.02rem;
		margin-left: 0.18rem;
		height: 0.53rem;
		line-height: 0.53rem;
	}
	
	.title-bar .flow {
		float: right;
		margin-top: 0.26rem;
		width: 1.28rem;
		height: 0.53rem;
		line-height: 0.53rem;
		background: #eee;
		text-align: center;
		border-radius: 0.26rem;
		font-size: 0.32rem;
		color: #a30000;
	}
	
	.title-bar .zan {
		float: right;
		margin-top: 0.26rem;
		text-align: center;
		font-size: 0.32rem;
		color: #999;
		align-items: center;
		display: flex;
	}
	
	.title-bar .zan span {
		margin-right: 0.1rem;
	}
	
	.title-bar .zan .re-icon {
		margin-right: 0.5rem;
	}
	
	.common-list .goods-detail {
		margin-top: 0.4rem;
	}
	
	.common-list .goods-detail p {
		font-size: 0.4rem;
		color: #222;
		line-height: 0.58rem;
	}
	
	.common-list .goods-detail .link-style {
		width: 100%;
		height: 1.17rem;
		line-height: 1.17rem;
		border-bottom: dashed 1px #ccc;
	}
	
	.common-list .goods-detail .link {
		background: #eee;
		height: 0.66rem;
		overflow: hidden;
		padding: 0 0.16rem;
		display: flex;
		align-items: center;
		float: left;
		margin-top: 0.25rem;
	}
	
	.common-list .goods-detail .link span {
		color: #666;
		font-size: 0.32rem;
		float: left;
		height: 0.66rem;
		line-height: 0.66rem;
		display: inline-block;
	}
	
	.common-list .goods-detail.link i {
		float: left;
		margin-right: 0.1rem;
	}
	
	.common-list .visitor {
		margin-top: 0.69rem;
	}
	
	.common-list .visitor ul {
		overflow: hidden;
		margin: 0 0.88rem;
		display: flex;
		justify-content: center;
	}
	
	.common-list .visitor ul li {
		float: left;
		width: 0.77rem;
		height: 0.77rem;
		margin-right: 0.21rem;
	}
	
	.common-list .visitor ul li img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.common-list .visitor .assist {
		width: 100%;
		height: 1.3rem;
		line-height: 1.3rem;
		text-align: center;
		font-size: 0.32rem;
		color: #999;
		border-bottom: dashed 1px #ccc;
	}
	
	.comment {
		background: #fff;
		padding: 0 0.26rem;
		margin-bottom: 2rem;
	}
	
	.comment .title {
		height: 1.44rem;
		line-height: 1.44rem;
		overflow: hidden;
	}
	
	.comment .title h2 {
		float: left;
		font-size: 0.4rem;
		color: #222;
	}
	
	.comment .title span {
		float: right;
		font-size: 0.32rem;
		color: #666;
	}
	
	.comment .title i {
		float: right;
		margin: 0.54rem 0;
	}
	
	.comment-list ul li {
		border-bottom: dashed 1px #aaa;
		padding: 0.46rem 0;
	}
	
	.comment-list ul li:last-child {
		border-bottom: none;
	}
	
	.comment-list .content {
		margin-left: 1.32rem;
		font-size: 0.37rem;
		color: #222;
		margin-top: 0.45rem;
	}
	
	.comment-list .reply {
		margin-left: 1.32rem;
		margin-top: 0.26rem;
		background: #F4F5F7;
		padding: 0.37rem 0.26rem;
		font-size: 0.32rem;
		color: #222;
	}
	
	.comment-list .reply span {
		font-size: 0.32rem;
		color: #666;
	}
	
	.comment-list .reply p {
		color: #4F98EA;
		font-size: 0.32rem;
	}
	
	.share-wrap {
		width: 95%;
		margin: 0 auto;
	}
	
	.share-wrap ul {
		overflow: hidden;
		background-color: #fff;
		padding: 0.53rem 0.26rem;
		border-radius: 0.21rem;
	}
	
	.share-wrap ul li {
		float: left;
		margin-right: 0.53rem;
		text-align: center;
		font-size: 0.37rem;
		color: #222;
	}
	
	.share-wrap ul li img {
		width: 1.33rem;
		height: 1.33rem;
	}
	
	.share-wrap button {
		width: 100%;
		border: none;
		background: #fff;
		height: 1.44rem;
		margin: 0.26rem 0;
		border-radius: 0.21rem;
		font-size: 0.4rem;
		color: #a30000;
	}
	
	.bottom-bar {
		position: fixed;
		bottom: 0;
		height: 1.3rem;
		overflow: hidden;
		width: 100%;
		left: 0;
		background: #fff;
		padding: 0.26rem 0.26rem;
		display: flex;
		align-items: center;
	}
	
	.bottom-bar .thumb {
		float: left;
		width: 0.77rem;
		height: 0.77rem;
		border-radius: 50%;
	}
	
	.bottom-bar .input {
		float: left;
		background: #F4F5F7;
		width: 4.37rem;
		height: 0.9rem;
		line-height: 0.9rem;
		margin-left: 0.13rem;
		padding: 0 0.37rem;
		border-radius: 0.05rem;
		color: #999;
		font-size: 0.32rem;
	}
	
	.bottom-bar .browse-data {
		overflow: hidden;
		margin-left: 0.4rem;
		height: 0.9rem;
		line-height: 0.9rem;
		display: flex;
		width: 40%;
		align-items: center;
	}
	
	.bottom-bar .browse-data li {
		flex: 1;
		height: 0.9rem;
		line-height: 0.9rem;
		float: left;
		display: flex;
		align-items: center;
		text-align: center;
		margin-right: 0.26rem;
	}
	
	.bottom-bar .browse-data li span {
		font-size: 0.32rem;
		color: #666;
		display: inline-block;
		margin-left: 0.06rem;
	}
	
	.bottom-bar .browse-data li:last-child {
		margin-right: 0;
	}
	
	.reply-wrap {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		background: #fff;
		padding: 0.26rem;
		z-index: 999;
		/*border-top: solid 3px red;*/
	}
	
	.reply-wrap>div {
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
	}
	
	.reply-wrap>div img {
		position: fixed;
		bottom: 0.26rem;
		left: 0.26rem;
		width: 0.77rem;
		height: 0.77rem;
		border-radius: 50%;
	}
	
	.reply-wrap>div #textarea {
		margin-left: 0.9rem;
		width: 78%;
		background: #F4F5F7;
		resize: none;
		float: left;
		border-radius: 0.05rem;
		font-size: 0.32rem;
		color: #222;
		height: auto!important;
	}
	
	.reply-wrap>div .send {
		display: inline-block;
		color: #a30000;
		opacity: .7;
		font-size: 0.4rem;
		position: fixed;
		right: 0.26rem;
		bottom: 0.4rem;
	}
	
	.share-wrap>.reply {
		overflow: hidden;
		background-color: #fff;
		border-radius: 0.21rem;
		padding: 0 0.26rem;
	}
	
	.share-wrap>.reply li {
		text-align: center;
		font-size: 0.4rem;
		color: #222;
		width: 100%;
		height: 1.44rem;
		justify-content: center;
		align-items: center;
		display: flex;
	}
</style>
<style>
	#Thread .weui-cell {
		padding: 0!important;
	}
	
	#Thread .weui-textarea {
		background: #F4F5F7!important;
		padding: 0.26rem;
		height: 0.9rem;
	}
	
	#Thread .weui-cell:before {
		border: none;
	}
</style>